<template>
  <div class="about">
    <!-- 页面头部 -->
    <section class="about__header section">
      <div class="container">
        <h1 class="section-title">关于我</h1>
        <p class="about__intro">
          {{ personalInfo.about.introduction }}
        </p>
      </div>
    </section>
    
    <!-- 个人信息卡片 -->
    <section class="about__info section">
      <div class="container">
        <div class="about__info-grid">
          <div class="about__info-card">
            <img :src="personalInfo.avatar" :alt="personalInfo.name" />
          </div>
          
          <div class="about__info-details">
            <h2>{{ personalInfo.name }}</h2>
            <p class="about__info-title">{{ personalInfo.title }}</p>
            
            <div class="about__info-list">
              <div class="about__info-item">
                <ElIcon :size="20">
                  <Message />
                </ElIcon>
                <span>{{ personalInfo.email }}</span>
              </div>
              <div class="about__info-item">
                <ElIcon :size="20">
                  <Location />
                </ElIcon>
                <span>{{ personalInfo.location }}</span>
              </div>
              <div class="about__info-item">
                <ElIcon :size="20">
                  <Phone />
                </ElIcon>
                <span>{{ personalInfo.phone }}</span>
              </div>
            </div>
            
            <div class="about__info-actions">
              <ElButton type="primary" size="large">
                <ElIcon><Download /></ElIcon>
                下载简历
              </ElButton>
              <ElButton size="large" @click="$router.push('/contact')">
                <ElIcon><Message /></ElIcon>
                联系我
              </ElButton>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 兴趣爱好 -->
    <section class="about__interests section">
      <div class="container">
        <h2 class="section-title">兴趣爱好</h2>
        <div class="about__interests-grid">
          <div
            v-for="(interest, index) in personalInfo.about.interests"
            :key="index"
            class="about__interest-item"
          >
            <ElIcon :size="24">
              <Star />
            </ElIcon>
            <span>{{ interest }}</span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 教育背景 -->
    <section class="about__education section">
      <div class="container">
        <h2 class="section-title">教育背景</h2>
        <Timeline :items="educationTimeline" />
      </div>
    </section>
    
    <!-- 工作经历 -->
    <section class="about__experience section">
      <div class="container">
        <h2 class="section-title">工作经历</h2>
        <Timeline :items="experienceTimeline" />
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Message, Location, Phone, Download, Star } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import Timeline from '@/components/sections/Timeline.vue'

const userStore = useUserStore()
const { info: personalInfo } = userStore

// 转换教育背景数据为时间线格式
const educationTimeline = computed(() => {
  return personalInfo.about.education.map(edu => ({
    period: edu.period,
    title: edu.degree,
    subtitle: edu.school,
    description: edu.description
  }))
})

// 转换工作经历数据为时间线格式
const experienceTimeline = computed(() => {
  return personalInfo.about.experience.map(exp => ({
    period: exp.period,
    title: exp.position,
    subtitle: exp.company,
    description: exp.description,
    achievements: exp.achievements
  }))
})
</script>

<style lang="scss" scoped>
.about {
  &__header {
    text-align: center;
  }
  
  &__intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
    white-space: pre-line;
  }
  
  &__info {
    background: var(--bg-secondary);
  }
  
  &__info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-2xl;
    align-items: center;
    
    @include respond-to('md') {
      grid-template-columns: 1fr 2fr;
    }
  }
  
  &__info-card {
    img {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      display: block;
      border-radius: $radius-xl;
      box-shadow: var(--shadow-xl);
    }
  }
  
  &__info-details {
    h2 {
      font-size: $font-size-3xl;
      margin-bottom: $spacing-sm;
    }
  }
  
  &__info-title {
    font-size: $font-size-xl;
    color: $primary-color;
    margin-bottom: $spacing-xl;
  }
  
  &__info-list {
    margin-bottom: $spacing-xl;
  }
  
  &__info-item {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    padding: $spacing-sm 0;
    color: var(--text-secondary);
    font-size: $font-size-base;
    
    .el-icon {
      color: $primary-color;
    }
  }
  
  &__info-actions {
    display: flex;
    gap: $spacing-md;
    flex-wrap: wrap;
  }
  
  &__interests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-md;
    max-width: 600px;
    margin: 0 auto;
    
    @include respond-to('md') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__interest-item {
    @include flex-center;
    gap: $spacing-sm;
    padding: $spacing-md;
    background: var(--bg-secondary);
    border-radius: $radius-md;
    font-weight: $font-weight-medium;
    @include transition(all);
    
    &:hover {
      background: $primary-color;
      color: white;
      transform: translateY(-4px);
      
      .el-icon {
        color: white;
      }
    }
    
    .el-icon {
      color: $primary-color;
      @include transition(color);
    }
  }
  
  &__education,
  &__experience {
    background: var(--bg-secondary);
  }
}
</style>

